<!DOCTYPE html>
<html lang="en">
<head>
	<{include file="public_html/header_tag.html" }>
	<link href="/static/public/layer/src/css/layui.css" rel="stylesheet">
	<script src="/static/public/layer_mobile/layer.js"></script>
	<style>
		.curr i{color: #d2d2d2; background-color: #999;}
	</style>
</head>
<body>
<header class="brB">
	<div class="h_top">
		<div class="hLeft"><a href="/my/classes/volume_list/" class="icoH icoReturn mt20"></a></div>
		<div class="hCenter"><span class="tit c-3ac9af" id="topic_type_span"><{$volume_info.name}></span></div>
	</div>
</header>
<div class="warp">
	<form action="/my/tiku/save_volume" method="post" id="save_volume" style="display: none;">
	<input type="hidden" name="test_volume_history_id" value="<{$volume_history_id|default:0}>" />
	</form>
	<div class="fix item">
		<{assign var="key" value="1"}>
		<{foreach from=$volume_info.topic_list item=topics key=topic_type}>
			<{foreach from=$topics item=item}>
			<{if $topic_type == 1}>
			<div class="topic_box topic_number" key="{$key}>" topic_type="1" <{if $item.id != $volume_info.first_topic}>style="display: none;"<{/if}> topic_id="<{$item.id}>" id="form<{$item.id}>">
				<div class=" p20">
					<div class="fs32">
						<i class="isetOdd r5 mr10 b-3ac9af topic_type_i"><{$key}>、单选题</i>
					</div>
				</div>
				<div class="b-FFFFFF brT p20">
					<div class="fs40 pb20">
						<span><{$item.subject_text}></span>
						<ul class="fs30 pt20 answer" topic_id="<{$item.id}>">
							<{foreach from=$item.result item=answers key=key1}>
							<li class="ptb10">
								<i class="isetEg r100 mr20"><{$letter[$key1]}></i><span answer_id="<{$answers.id}>"><{$answers.answer_text}></span>
							</li>
							<{/foreach}>
						</ul>
					</div>
				</div>
				<!--详解模式star-->
				<div class="b-FFFFFF fix ptb30 stDetailed" style="display:none;">
					<div class="plr20">
						<div class="ptb20"><span class="c-3ac9af">试题详解：</span></div>
						<div style="color:#daac21;"><{$item.analysis}></div>
					</div>
				</div>
			</div>
			<!--详解模式end -->
			<{else if $topic_type == 2}>
			<div class="topic_box topic_number" key="<{$key}>" topic_type="2" <{if $item.id != $volume_info.first_topic}>style="display: none;"<{/if}> topic_id="<{$item.id}>" id="form<{$item.id}>">
				<div class="p20">
					<div class="fs32">
						<i class="isetOdd r5 mr10 b-3ac9af topic_type_i"><{$key}>、多选题</i><span><{$item.subject_text}></span>
					</div>
					<ul class="fs30 pt20 answer" topic_id="<{$item.id}>">
						<{foreach from=$item.result item=answers key=key1}>
						<li class="ptb10">
							<i class="isetEg r100 mr20"><{$letter[$key1]}></i><span answer_id="<{$answers.id}>"><{$answers.answer_text}></span>
						</li>
						<{/foreach}>
					</ul>
				</div>
				<!--详解模式star-->
				<div class="b-FFFFFF fix ptb30 stDetailed" style="display:none;">
					<div class="plr20">
						<div class="ptb20"><span class="c-3ac9af">试题详解：</span></div>
						<div style="color:#daac21;"><{$item.analysis}></div>
					</div>
				</div>
			</div>
			<{else if $topic_type == 3}>
			<div class="topic_box topic_number" key="<{$key}>" topic_type="3" <{if $item.id != $volume_info.first_topic}>style="display: none;"<{/if}> topic_id="<{$item.id}>" id="form<{$item.id}>">
				<div class="b-FFFFFF p20">
					<div class="fs32">
						<i class="isetOdd r5 mr10 b-3ac9af topic_type_i"><{$key}>、判断题</i><span><{$item.subject_text}></span>
					</div>
					<ul class="fs30 pt20 answer" topic_id="<{$item.id}>">
						<{foreach from=$item.result item=answers key=key1}>
						<li class="ptb10">
							<i class="isetEg r100 mr20"><{$letter[$key1]}></i><span answer_id="<{$answers.id}>"><{$answers.answer_text}></span>
						</li>
						<{/foreach}>
					</ul>
				</div>
				<!--详解模式star-->
				<div class="b-FFFFFF fix ptb30 stDetailed" style="display:none;">
					<div class="plr20">
						<div class="ptb20"><span class="c-3ac9af">试题详解：</span></div>
						<div style="color:#daac21;"><{$item.analysis}></div>
					</div>
				</div>
			</div>
			<{else if $topic_type == 4}>
			<form action="/user/tiku/save_volume" method="post" class="layui-form layui-form-pane topic_box" key="<{$key}>" id="form<{$item.id}>" <{if $item.id != $volume_info.first_topic}>style="display: none;"<{/if}> topic_id="<{$item.id}>"  topic_type="4">
			
			<{else if $topic_type == 5}>
			<div class="topic_box topic_number" key="<{$key}>" topic_type="5" <{if $item.id != $volume_info.first_topic}>style="display: none;"<{/if}> topic_id="<{$item.id}>" id="form<{$item.id}>">
				<div class=" p20">
					<div class="fs32">
						<i class="isetOdd r5 mr10 b-3ac9af topic_type_i"><{$key}>、填空题</i>
					</div>
				</div>
				<div class="b-FFFFFF mt20 brT p20">
					<div class="fs40 pt20 pb20">
						<span><{<{$item.id}>|change_tiankong:$item.subject_text}></span>
					</div>
				</div>
				<!--详解模式star-->
				<div class="b-FFFFFF fix ptb30 stDetailed" style="display:none;">
					<div class="plr20">
						<div class="ptb20"><span class="c-3ac9af">试题详解：</span></div>
						<div style="color:#daac21;"><{$item.analysis}></div>
					</div>
				</div>
			</div>
			<{else if $topic_type == 6}>
			<div class="topic_box topic_number" key="<{$key}>" topic_type="6" <{if $item.id != $volume_info.first_topic}>style="display: none;"<{/if}> topic_id="<{$item.id}>" id="form<{$item.id}>">
				<div class=" p20">
					<div class="fs32">
						<i class="isetOdd r5 mr10 b-3ac9af topic_type_i"><{$key}>、计算题</i>
					</div>
				</div>
				<div class="b-FFFFFF mt20 brT p20">
					<div class="fs40 pt20 pb20">
						<span><{$item.subject_text}> = <input type="number" style="width: 30px;" class="calc_text inputCss"></span>
					</div>
				</div>
				<!--详解模式star-->
				<div class="b-FFFFFF fix ptb30 stDetailed" style="display:none;">
					<div class="plr20">
						<div class="ptb20"><span class="c-3ac9af">试题详解：</span></div>
						<div style="color:#daac21;"><{$item.analysis}></div>
					</div>
				</div>
			</div>
			<{else if $topic_type == 7}>
			<div class="topic_box topic_number" key="<{$key}>" topic_type="7" <{if $item.id != $volume_info.first_topic}>style="display: none;"<{/if}> topic_id="<{$item.id}>" id="form<{$item.id}>">
				<div class=" p20">
					<div class="fs32">
						<i class="isetOdd r5 mr10 b-3ac9af topic_type_i"><{$key}>、列算式</i>
					</div>
				</div>
				<div class="b-FFFFFF mt20 brT p20">
					<div class="fs40 pt20 pb20">
						<span><{<{$item.id}>|change_tiankong:$item.subject_text}></span>
					</div>
				</div>
				<!--详解模式star-->
				<div class="b-FFFFFF fix ptb30 stDetailed" style="display:none;">
					<div class="plr20">
						<div class="ptb20"><span class="c-3ac9af">试题详解：</span></div>
						<div style="color:#daac21;"><{$item.analysis}></div>
					</div>
				</div>
			</div>
			<{/if}>
			<{$key=$key+1}>
			<{/foreach}>
		<{/foreach}>
		
		<div style="text-align: center; margin-top: 20px;">
			<button class="layui-btn layui-btn-small up_topic"><i class="layui-icon"></i>上一题</button>
			<button class="layui-btn layui-btn-small next_topic">下一题<i class="layui-icon"></i></button>
			<button class="layui-btn layui-btn-small layui-btn-warm save_volume_but">交卷</button>
		</div>
	</div>
</div>
<!--试卷报告star-->
<div class="buyShowBox" style="display:none;" id="testReport">
	<div class="buy_mask"></div>
	<!--star 选择-->
	<div class="buy_dialog b-FFFFFF">
		<div class="layout-box tac ptb20 brB">
			<div class="box-col">已答 <span class="c-3ac9af" id="right_topic_number"><{$volume_info.has_answer_num}></span></div>
			<div class="box-col">未答 <span class="c-fa3838" id="wrong_topic_number"><{$volume_info.no_has_answer_num}></span></div>
			<div class="box-col">总数 <span class="c-999999" id="topic_number"><{$volume_info.topic_total}></span></div>
		</div>
		<!--star支付选择-->
		<div class="paperNumber">
			<{assign var="key" value="1"}>
			<{foreach from=$volume_info.topic_list item=topics key=topic_type}>
				<{foreach from=$topics item=item}>
				<!-- class="answerYes"  class="answerNo"-->
					<a class="<{if $item.has_answer == 1}>answerYes<{/if}> topic_id_<{$item.id}>" href="javascript:;"><{$item.has_answer}><{$key}></a>
				<{$key=$key+1}>
				<{/foreach}>
			<{/foreach}>
		</div>
		<!--end支付选择-->
	</div>
	<!--end 选择-->
</div>
<!--试卷报告end -->
<footer class="p_fotbtn brT">
	<div class="layout-box sysbtnfooter">
		<a class="box-col" href="javascript:;" id="openTestReport">
			<div class="ico syb_000"></div>
			<span>试卷报告</span>
		</a>
		<!-- <a class="box-col" href="javascript:;">
			<div class="ico syb_001"></div>
			<span><font id="topic_number_i">1</font>/<{$volume_info.topic_total}></span>
		</a> -->
		<a class="box-col" href="javascript:;" id="openDetailed">
			<div class="ico syb_002"></div>
			<span>打开详解</span>
		</a>
		<input type="hidden" id="first_topic" value="form<{$volume_info.first_topic}>" />
	</div>
</footer>
<link rel="stylesheet" href="/static/wap/css/keyboard.css">
<script src="/static/wap/js/keyboard.js"></script>
<div id="keyboard_all" style="display: none;">
<{include file="tiku/keyboard_all.html" }>
</div>
<div id="keyboard_symbol" style="display: none;">
<{include file="tiku/keyboard_symbol.html" }>
</div>
<div id="keyboard_number" style="display: none;">
<{include file="tiku/keyboard_number.html" }>
</div>
<script>
$(function(){
	show_topic_type();
	var volume_id = 0;
	if("<{$start_type|default:0}>" == 'volume'){
		volume_id = "<{$volume_info.id}>";
	}
	
	$('#openDetailed').click(function(){
		$(this).addClass('curr');
		$(this).find('span').html('打开详解');
		$(".topic_box:visible").find(".stDetailed").toggle();
		// $('.stDetailed').show();
	});
	$('#openTestReport').click(function(){
		$(this).addClass('curr');
		$('#testReport').show();
	});
	$('.buy_mask').click(function(){
		$('#testReport').hide();
		$('#openTestReport').removeClass('curr');
	})

	$(".next_topic").click(function(){
		// var _this = $(".topic_box:visible");
		var now_topic = $("#first_topic").val();
		var _this = $("#"+now_topic);
		var need_show_elment = _this.next('.topic_box');
		if(need_show_elment.length == 1){
			_this.hide();
			need_show_elment.show();
			$("#first_topic").val(need_show_elment.attr("id"));
		}
		show_topic_number();
		answer_topic(_this);
		show_topic_type();
	})

	$(".up_topic").click(function(){
		var now_topic = $("#first_topic").val();
		var _this = $("#"+now_topic);
		// if(_this.attr("status") == 'hasanswer'){
			var need_show_elment = _this.prev('.topic_box');
			if(need_show_elment.length == 1){
				_this.hide();
				need_show_elment.show();
				$("#first_topic").val(need_show_elment.attr("id"));
			}
			show_topic_number();
		// }
		answer_topic(_this);
		show_topic_type();
	})

	$(".save_volume_but").click(function(){
		var now_topic = $("#first_topic").val();
		var _this = $("#"+now_topic);
		if(_this.attr("status") == 'hasanswer'){
			var need_show_elment = _this.next();
			if(need_show_elment.length == 1){
				_this.hide();
				need_show_elment.show();
				$("#first_topic").val(need_show_elment.attr("id"));
			}
			show_topic_number();
		}
		$("#save_volume").submit();
	})

	$(".answer li").click(function(){
		var topic_elem = $(this).closest(".topic_box");
		var topic_type = topic_elem.attr("topic_type");
		var curr_topic = $(this).closest("li");
		if(curr_topic.hasClass("curr")){
			curr_topic.removeClass("curr");
		}else{
			curr_topic.addClass("curr");
			if(topic_type != 2){
				curr_topic.siblings().removeClass("curr");
			}
		}
		topic_elem.removeAttr("status");
	})

	$(document).on("change", ".calc_text", function(){
		var topic_elem = $(this).closest(".topic_box");
		topic_elem.removeAttr("status");
	})


	function answer_topic(topic_obj){
		//做过的题目不提交
		if(topic_obj.attr("status") == 'hasanswer'){}else{
			var topic_type = topic_obj.attr("topic_type");
			var topic_id = topic_obj.attr("topic_id");
			switch(topic_type){
				case '1':
				case '2':
				case '3':
					var answer_id = new Array();
					var j = 0;
					$.each(topic_obj.find("li"), function(i, obj){
						if($(obj).hasClass('curr')){
							answer_id[j] = $(obj).find("span").attr('answer_id');
							j++;
						}
					})
					if(answer_id.length > 0){
						//保存答案
						$.ajax({
							type: "POST",
							url: "/my/tiku/save_topic_answer",
							dataType:"json",
							async:false,
							data:{'topic_id':topic_id, 'answer_id':answer_id, 'volume_id':volume_id, 'volume_history_id':"<{$volume_history_id|default:0}>"},
							success: function(result){
								if(result.code == 1){
									//添加已经做过的标识
									topic_obj.attr("status", "hasanswer");
									write_topic_answer(topic_obj.attr("topic_type"), topic_id, answer_id);
									test_result();
								}
							}
						});
					}
				break;
				case '4':
					var answer_id = $("#editor"+topic_id).val();
					if(answer_id != ''){
						$.ajax({
							type: "POST",
							url: "/my/tiku/save_topic_answer",
							dataType:"json",
							async:false,
							data:{'topic_id':topic_id, 'answer_id':answer_id, 'volume_id':volume_id, 'volume_history_id':"<{$volume_history_id|default:0}>"},
							success: function(result){
								if(result.code == 1){
									//添加已经做过的标识
									topic_obj.attr("status", "hasanswer");
									$(".paperNumber").find(".topic_id_"+topic_id).removeClass("answerYes answerNo");
									test_result();
								}
							}
						});
					}
				break;
				case '5':
					var user_answers = new Array();
					var j = 0;
					$.each(topic_obj.find(".tiankong_text"), function(i, obj){
						if($(obj).val() != ''){
							user_answers[j] = $(obj).val();
							j++;
						}
					})
					if(user_answers.length > 0){
						$.ajax({
							type: "POST",
							url: "/my/tiku/save_topic_answer",
							dataType:"json",
							async:false,
							data:{'topic_id':topic_id, 'volume_id':volume_id, 'volume_history_id':"<{$volume_history_id|default:0}>", 'user_answers':user_answers},
							success: function(result){
								if(result.code == 1){
									//添加已经做过的标识
									topic_obj.attr("status", "hasanswer");
									test_result();
								}
							}
						});
					}
				break;
				case '6':
					var user_answers = topic_obj.find(".calc_text").val();
					if($.trim(user_answers) == ''){
						return false;
					}
					$.ajax({
						type: "POST",
						url: "/my/tiku/save_topic_answer",
						dataType:"json",
						async:false,
						data:{'topic_id':topic_id, 'volume_id':volume_id, 'volume_history_id':"<{$volume_history_id|default:0}>", 'user_answers':user_answers},
						success: function(result){
							if(result.code == 1){
								//添加已经做过的标识
								topic_obj.attr("status", "hasanswer");
								
								test_result();
							}
						}
					});
				break;
				case '7':
					var user_answers = topic_obj.find(".tiankong_text").val();
					if(user_answers != ''){
						$.ajax({
							type: "POST",
							url: "/my/tiku/save_topic_answer",
							dataType:"json",
							async:false,
							data:{'topic_id':topic_id, 'volume_id':volume_id, 'volume_history_id':"<{$volume_history_id|default:0}>", 'user_answers':user_answers},
							success: function(result){
								if(result.code == 1){
									//添加已经做过的标识
									topic_obj.attr("status", "hasanswer");
									write_topic_answer(topic_obj.attr("topic_type"), topic_id, answer_id);
									test_result();
								}
							}
						});
					}
				break;
			}
		}

		if($(".topic_box[status!='hasanswer']").length <= 0 && $(".item").children("form[status!='hasanswer']").length <= 0 && ! $(".center_box").hasClass("no_submit")){
			/*$.confirm("题目做完了，是否交卷？", function() {
			  //点击确认后的回调函数
			}, function() {
			  //点击取消后的回调函数
			});
			layer.confirm('题目做完了，是否交卷？', {
				title:"提示",
				icon: 1,
				btn: ['交卷','取消'] //按钮
			}, function(){
				$("#save_volume").submit();
			},function(){
				$(".center_box").addClass("no_submit");
			});*/
			$("#save_volume").submit();
		}
	}



	function show_topic_number(){
		var now_topic = $("#first_topic").val();
		var _this = $("#"+now_topic);
		$("#topic_number_i").html(parseInt(_this.attr("key")))
	}

	function test_result(){
		$("#right_topic_number").html($(".right_topic_number").length);
		$("#wrong_topic_number").html($(".wrong_topic_number").length);
		$("#topic_number").html($(".topic_number").length);
	}

	function write_topic_answer(topic_type, topic_id, result_id){
		html = '';
		if(topic_type == 1){
			html = "<input type='radio' name='topic["+topic_type+"]["+topic_id+"]' checked='checked' value='"+result_id+"' />";
		}else if(topic_type == 2){
			$.each(result_id,function(i, obj){
				html += "<input type='checkbox' name='topic["+topic_type+"]["+topic_id+"][]' checked='checked' value='"+obj+"' />";
			});
		}else if(topic_type == 3){
			html = "<input type='radio' name='topic["+topic_type+"]["+topic_id+"]' checked='checked' value='"+result_id+"' />";
		}else{
			html = "<input type='hidden' name='topic["+topic_type+"]["+topic_id+"]' value='"+result_id+"' />";
		}
		$("#save_volume").append(html);
	}
})


	function choice_accounts(obj){
		$(".accounts").attr("id", "");
		$(".accounts").siblings().attr("id", "");
		$(obj).siblings(".accounts").attr("id", "hidden_id");
		$(obj).attr("id", "hidden_id_text");
		layer.open({
			type: 2,
			title: '选择科目',
			shadeClose: true,
			shade: 0.8,
			area: ['80%', '70%'],
			maxmin: true,
			content: '/tk_accounts_subject' //iframe的url
		}); 
	}

	function show_topic_type(){
		$("#topic_type_span").html($(".topic_box:visible").find(".topic_type_i").html());
	}
</script>
</body>
</html>